<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>

<body>
  <input type="text" name="" value="青岛">
  <button>查询</button>
  <div id="main" style="width:100%;height: 400px;"></div>
  <script type="text/javascript" src="./echarts.js"></script>
  <script type="text/javascript" src="../13AJAX/ajax.js"></script>
 <script>
    // 基于准备好的dom，初始化echarts实例
    // 初始容器
    let myChart = echarts.init(document.getElementById('main'));
    let option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    };
    myChart.setOption(option)

    let btn = document.querySelector('button')
    let inp = document.querySelector('input')
    btn.onclick = function () {
        ajax({
            method: 'get',
            url: 'https://geoapi.qweather.com/v2/city/lookup',
            params: {
                location: inp.value,
                key: 'c494e264764449f7b4f6bf742276d7f9'
            },
            success: function (res) {
                console.log(res)
                weather(res.location[0].id)
            }
        })
    }

    function weather(id) {
        ajax({
            method: 'get',
            url: 'https://devapi.qweather.com/v7/weather/7d',
            params: {
                location: id,
                key: 'c494e264764449f7b4f6bf742276d7f9'
            },
            success: function (res) {
                console.log(res)
                if (res.code == 200) {
                    option.xAxis.data = []
                    option.series[0].data = []

                    for (let i = 0; i < res.daily.length; i++) {
                        option.xAxis.data.push(res.daily[i].fxDate)
                        option.series[0].data.push(res.daily[i].humidity)
                    }
                    // 重新渲染
                    myChart.setOption(option)
                }
            }
        })
    }
</script>
</body>

</html>